<template>
	<view v-if="detail.id">
		<z-paging ref="paging" refresher-only @onRefresh="getDetail">
			<view class="uni-bg-white detail-box">
				<view class="mer-top flex item-center justify-between">
					<text>申请编号：{{detail.applyNo}}</text>
					<text class="mer-status"
						:style="{'color':getStatus(detail.auditState,'color')}">{{getStatus(detail.auditState,'text')}}</text>
				</view>
				<view class="detail-title">基本信息</view>
				<view class="detail-dec">
					<view class="dec-line">
						<view class="dec-title">商家logo:</view>
						<image :src="detail.logo" mode="" class="logo-img"></image>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">商家名称:</text>
						<text class="dec-answer">{{detail.merchantName}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">商家简称:</text>
						<text class="dec-answer">{{detail.merchantShortName}}</text>
					</view>
					<!-- <view class="dec-line flex item-center justify-between">
						<text class="dec-title">公司类型:</text>
						<text class="dec-answer">{{detail.merchantName}}</text>
					</view> -->
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">所属行业:</text>
						<text class="dec-answer">{{detail.mccName}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">经营地址:</text>
						<text class="dec-answer">{{detail.businessProvinceName ? 
					detail.businessProvinceName 
					+ (detail.businessCityName?'/'+detail.businessCityName:'')
					+(detail.businessCountyName?'/'+detail.businessCountyName:''):''}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">经营详细地址:</text>
						<text class="dec-answer">{{detail.businessAddress}}</text>
					</view>
					<view class="dec-line">
						<view class="dec-title">线下经营-门头照:</view>
						<image :src="detail.storeHeaderPicUrl" mode="" class="logo-img"></image>
					</view>
					<view class="dec-line">
						<view class="dec-title">线下经营-收银台:</view>
						<image :src="detail.storeCashierDeskPicUrl" mode="" class="logo-img"></image>
					</view>
					<view class="dec-line">
						<view class="dec-title">线下经营-内景照:</view>
						<image :src="detail.storeIndoorPicUrl" mode="" class="logo-img"></image>
					</view>
				</view>

				<view class="detail-title">联系人信息</view>
				<view class="detail-dec">
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">联系人姓名:</text>
						<text class="dec-answer">{{detail.contactName}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">联系人手机号:</text>
						<text class="dec-answer">{{detail.contactMobileNo}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">联系人邮箱:</text>
						<text class="dec-answer">{{detail.contactEmail}}</text>
					</view>
				</view>
				<!-- <view class="detail-title">法人信息</view>
				<view  class="detail-dec">
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">法人身份证号:</text>
						<text class="dec-answer">{{detail.legalCertNo}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">法人证件有效期开始日期:</text>
						<text class="dec-answer">{{detail.legalCertBeginDate}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">法人证件有效期截止日期:</text>
						<text class="dec-answer">{{detail.legalCertEndDate}}</text>
					</view>
					<view class="dec-line flex item-center justify-between">
						<text class="dec-title">法人身份证地址:</text>
						<text class="dec-answer">{{detail.legalAddr}}</text>
					</view>
					<view class="dec-line">
						<view class="dec-title">法人身份证人像面:</view>
						<view style="margin: 10px auto; width: 140px;">
							<image :src="settleData.legalCertFrontPicUrl" mode="widthFix"  class="logo-img" style="width: 140px;"></image>
						</view>
					</view>
					<view class="dec-line">
						<view class="dec-title">法人身份证国徽面:</view>
						<view style="margin: 10px auto; width: 140px;">
							<image :src="settleData.legalCertBackPicUrl" mode="widthFix"  class="logo-img" style="width: 140px;"></image>
						</view>
					</view>
				</view> -->

			</view>

			<template #bottom>
				<view v-if="detail.auditState == 1" class="btn-box flex item-center justify-between">
					<view class="callback-btn" @click="refusePop">审核不通过</view>
					<view class="release-btn" @click="nextStep">审核通过</view>
				</view>
			</template>
		</z-paging>
		<contentPop ref="contentPopRef" @onSubmit='onSubmit'></contentPop>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getmerchantEnterDetails,
		auditMerchantEnter
	} from '@/pagesD/api/merchant.js';
	import {
		modelShowToast
	} from '@/utils/index.js'
	import contentPop from './components/contentPop.vue'
	let getOpenerEventChannel = ref(null)
	const operMenu = ref([{
			color: '',
			text: '',
			id: ""
		},
		{
			color: 'rgba(252, 181, 19, 1)',
			text: '待审核',
			id: 1
		},
		{
			color: 'rgba(22, 190, 98, 1)',
			text: '已通过',
			id: 2
		},
		{
			color: 'rgba(51, 51, 51, 0.6)',
			text: '未通过',
			id: 3
		}
	])
	const getStatus = (txt, type) => {
		let arr = operMenu.value.filter((it) => {
			return it.id == txt
		})
		if (arr.length && arr[0]) {
			return arr[0][type]
		}
		return ''
	}
	const detail = ref({})
	const detailId = ref('')
	const paging = ref(null)
	const getDetail = async (id) => {
		uni.showLoading()
		let result = await getmerchantEnterDetails({
			id: detailId.value
		})
		if (result) {
			detail.value = result
			if (paging.value) {
				paging.value.complete(result);
			}
		}
		uni.hideLoading()
	}
	const goBack = () => {
		if (getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/pages/home/home'
			})
			return
		}
		getOpenerEventChannel.value.emit('reFreshPage', 'refresh')
		uni.navigateBack()
	}
	const noOper = ref(false)	
	const nextStep = () => {
		// if(noOper.value){
		// 	return
		// }
		modelShowToast({
				content: '确认通过该商户申请？',
				confirmColor:'#FA4543'
			},
			async () => {
				uni.showLoading({mask:true})
				noOper.value = true
				let result = await auditMerchantEnter({
					auditState: 2,
					id: detailId.value
				})
				if (result) {
					goBack()
				}
				noOper.value = false
				uni.hideLoading()
			})
	}
	const contentPopRef = ref()
	const refusePop = async () => {
		// if(noOper.value){
		// 	return
		// }
		contentPopRef.value.showPop(true)
	}
	const onSubmit = async (data) => {
		uni.showLoading({mask:true})
		noOper.value = true
		let result = await auditMerchantEnter({
			auditState: 3,
			id: detailId.value,
			refuseReason:data.refuseReason
		})
		if (result) {
			goBack()
		}
		noOper.value = false
		uni.hideLoading()
	}
	onLoad(({
		id
	}) => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel();
		if (id) {
			detailId.value = id
			getDetail(id)
		}
	})
</script>

<style scoped lang="scss">
	.detail-box {
		padding: 20px;
	}

	.mer-top {
		background-color: rgba(255, 233, 183, 1);
		padding: 8px 12px;
		border-radius: 12px;
		height: 38px;
		font-size: 12px;
		font-weight: 600;
		line-height: 22px;
		margin-bottom: 10px;

		.mer-status {
			font-size: 14px;
			font-weight: 600;
		}
	}

	.detail-title {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		padding: 10px 0;
	}

	.detail-dec {
		border-radius: 8px;
		background: rgba(245, 245, 245, 1);
		padding: 12px 16px;

		.dec-line {
			margin-bottom: 10px;
		}

		.logo-img {
			width: 52px;
			height: 52px;
			margin: 10px 0 0 0;
			border-radius: 8px;
		}

		.dec-title {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			color: rgba(51, 51, 51, 1);

		}

		.dec-answer {
			color: rgba(51, 51, 51, 0.6);
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}
	}

	.btn-box {
		background-color: #ffffff;
	}

	.release-btn {
		// width: 343px;
		width: 40%;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		// gap: 10px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;

		&.unactive {
			background: rgba(169, 171, 172, 1);
		}
	}

	.callback-btn {
		width: 40%;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #ffffff;
		color: #FA4543;
		border: 1px solid #FA4543;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;
	}
</style>